<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>文章列表</title>
        <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/iconfont.css" />
        <link rel="stylesheet" href="css/main.css" />
        <script src="./libs/jquery-1.12.4.min.js"></script>
        <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
        <!-- 引入模板引擎js文件 -->
        <script src="./libs/template-web.js"></script>
        
     </head>

    <body>
        <div class="container-fluid">
            <div class="common_title">文章类别管理</div>
            <div class="container-fluid common_con">
                <table
                    class="
                        table table-striped table-bordered table-hover
                        mp20
                        category_table
                    "
                >
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>Slug</th>
                            <th class="text-center" width="100">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>奇趣事</td>
                            <td>funny</td>
                            <td class="text-center">
                                <a
                                    href="javascript:void(0)"
                                    data-toggle="modal"
                                    class="btn btn-info btn-xs"
                                    >编辑</a
                                >
                                <a
                                    href="javascript:void(0)"
                                    class="btn btn-danger btn-xs"
                                    >删除</a
                                >
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3" class="text-center">
                                <a
                                    href="javascript:void(0)"
                                    class="btn btn-success"
                                    id="xinzengfenlei"
                                    data-toggle="modal"
                                    data-target="#myModal"
                                    >新增分类</a
                                >
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <!-- 模态框静态结构 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">New message</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="control-label">分类名称:</label>
                <input type="text" class="form-control" id="category-name">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">分类别名:</label>
                <input class="form-control" id="slug-text"></input>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary btn-change">Send message</button>
          </div>
        </div>
      </div>
    </div>
    </body>
</html>
<script src="./libs/https.js"></script>
<script type="text/html" id="tpl-list">
     {{each}}
    <tr>
        <td>{{$value.name}}</td>
        <td>{{$value.slug }}</td>
        <td class="text-center">
            <a
                href="javascript:void(0)"
                data-id="{{$value.id}}"
                data-toggle="modal"
                class="btn btn-info btn-xs"
                data-target="#myModal"
                >编辑</a
            >
            <a
                href="javascript:void(0)"
                data-id="{{$value.id}}"
                class="btn btn-danger btn-xs btn-del"
                
                >删除</a
            >
        </td>
    </tr>
    {{/each}}
</script>
<script>
  $(function () {
      function loadData() {
          $.ajax({
              type: "get",
              url: BigNew.category_list,
              success: function (backData) {
                  if (backData.code == 200) {
                      console.log(backData)
                      let data = backData.data
                      let htmlStr = template("tpl-list", data)
                      $("tbody").html(htmlStr)
                  }
              }
          })
      }
      loadData()
      $('#myModal').on('show.bs.modal',function (e) {
        if ($(e.relatedTarget).text()=='新增分类') {
          $('.modal-title').text('新增分类')
          $('.btn-change').text('新增')
          
        }else{
          $('.modal-title').text('编辑分类')
          $('.btn-change').text('编辑')
        }
        window.dataid=$(e.relatedTarget).attr('data-id')
        $.ajax({
          type: 'get',
          url: BigNew.category_search,
          data: {id:dataid
            
          },
          success: function(backData) {
            if (backData.code==200) {
              $('#category-name').val(backData.data[0].name)
              $('#slug-text').val(backData.data[0].slug)
            }
            
          }
        })
        
      })
      $('#myModal').on('hidden.bs.modal',function () {
        $('#category-name').val('')
        $('#slug-text').val('')
        
      })
      $('.btn-change').on('click',function () {
        let name=$('#category-name').val().trim()
        let slug=$('#slug-text').val().trim()
          if ($(this).text() =='新增') {
          $.ajax({
            type: 'post',
            url: BigNew.category_add,
            data: {name:name, slug:slug},
             success: function(backData) {
               if (backData.code==201) {
              $('#myModal').modal('hide')
              loadData() 
            }
            }
          })
        }else{
        $.ajax({
          type: 'post',
          url: BigNew.category_edit,
          data: {id:dataid,
            name:name,
            slug:slug
            
          },
          success: function(backData) {
            if (backData.code==200) {
              $('#myModal').modal('hide')
              loadData()   
            }
            
          }
        })}
        
      })
$('tbody').on('click','.btn-del',function () {
  let dataid=$(this).attr('data-id')
  $.ajax({
    type: 'post',
    url: BigNew.category_delete,
    data: {
      id:dataid
    },
    success: function(backData) {
      if (backData.code==204) {
        alert(backData.msg)
        loadData()
      }
      
    }
  })
})
      
  })
</script>
